<template>
    <section class="demo-container">

        <div id="demo3" class="chart-container"></div>

    </section>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: 'Demo3',
        data() {
            return {
                charts: null,
                opinion: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                opinionData:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        },
        methods: {
            drawChart(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'直接访问',
                            type:'bar',
                            barWidth: '60%',
                            data:[10, 52, 200, 334, 390, 330, 220]
                        }
                    ]
                })
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.drawChart('demo3')
            })
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .demo-container{
        border: 1px solid #e9eaec;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        transition: all .2s ease-in-out;
        .chart-container {
            width: 100%;
            height: 400px;
        }
    }
</style>